<template>
  <div>
    <el-tabs @tab-click="test" type="border-card">
      <el-tab-pane name="product" @click="test()" label="产品管理">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="name" label="名称" width="150">
          </el-table-column>
          <el-table-column prop="img" label="图片" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.img"
                fit="fit"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="pdescribe" label="描述" width="300">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="120">
          </el-table-column>
          <el-table-column prop="interest" label="利率" width="120">
          </el-table-column>
          <el-table-column prop="method" label="存款期限(月)" width="120">
          </el-table-column>
          <el-table-column prop="count" label="库存数量" width="120">
          </el-table-column>
          <el-table-column prop="sale" label="销售量" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" @click="delp(scope.row.id)" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table></el-tab-pane
      >
      <el-tab-pane name="seckillProduct" @click="test()" label="秒杀产品管理">
        <el-table :data="seckillTableData" border style="width: 100%">
          <el-table-column fixed prop="name" label="名称" width="150">
          </el-table-column>
          <el-table-column prop="img" label="图片" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.img"
                fit="fit"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="pdescribe" label="描述" width="300">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="120">
          </el-table-column>
          <el-table-column prop="interest" label="利率" width="120">
          </el-table-column>
          <el-table-column prop="method" label="存款期限(月)" width="120">
          </el-table-column>
          <el-table-column prop="count" label="库存数量" width="120">
          </el-table-column>
          <el-table-column prop="sale" label="销售量" width="120">
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="120">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                type="text"
                @click="delSeckill(scope.row.id)"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="manage" label="配置管理">
        <div style="width: 50%">
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="秒杀产品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="利率(%)">
              <el-input v-model="form.interest"></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input v-model="form.count"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="存款期限(月)">
              <el-input v-model="form.method"></el-input>
            </el-form-item>
            <el-form-item label="活动开始时间">
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动结束时间">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="今日启动">
              <el-switch v-model="form.is"></el-switch>
            </el-form-item>
            <el-form-item label="失信客户是否可以参与">
              <el-radio-group v-model="form.dishonesty">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="失业客户是否可以参与">
              <el-radio-group v-model="form.job">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="逾期客户是否可以参与">
              <el-radio-group v-model="form.overdue">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="购买该产品满足的年龄">
              <el-input v-model="form.ageSize"></el-input>
            </el-form-item>
            <el-form-item label="产品描述">
              <el-input type="textarea" v-model="form.pDescribe"></el-input>
            </el-form-item>

            <el-form-item label="产品图片">
              <el-upload
                class="upload-demo"
                action="http://68.79.13.74:8888/api/file/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-success="success"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </el-form>
        </div></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script>
import manageApi from "@/api/admin/manage";
export default {
  layout: "sign",

  data() {
    return {
      tableData: [],
      seckillTableData: [],
      fileList: [
        // {
        //   name: "",
        //   url: "",
        // },
      ],
      form: {
        name: "",
        interest: "",
        count: "",
        price: "",
        startTime: "",
        endTime: "",
        method: "",
        img: "",
        overdue: "",
        job: "",
        dishonesty: "",
        ageSize: "",
        is: false,
        pDescribe: "",
      },
      form1: {
        name: "",
        interest: "",
        count: "",
        price: "",
        startTime: "",
        endTime: "",
        method: "",
        img: "",
        overdue: "",
        job: "",
        dishonesty: "",
        ageSize: "",
        is: false,
        pDescribe: "",
      },
    };
  },

  methods: {
    success(response, file, fileList) {
      console.log(response);
      this.form.img = response.url;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleClick(row) {
      console.log(row);
    },

    test(tab, event) {
      if (tab.name == "product") {
        manageApi.getAllProduct().then((response) => {
          if (response.data.code == 200) {
            this.tableData = response.data.data.data;
          }
        });
      } else if (tab.name == "seckillProduct") {
        manageApi.getAllSeckillProduct().then((response) => {
          if (response.data.code == 200) {
            this.seckillTableData = response.data.data.data;
          }
        });
      } else if ((tab.name = "manage")) {
      }
    },

    delSeckill(id) {
      this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          manageApi.delSeckill(id).then((response) => {
            if (response.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });

              manageApi.getAllSeckillProduct().then((response) => {
                if (response.data.code == 200) {
                  this.seckillTableData = response.data.data.data;
                }
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    delp(id) {
      this.$confirm("此操作将永久删除该产品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          manageApi.delP(id).then((response) => {
            if (response.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              manageApi.getAllProduct().then((response) => {
                if (response.data.code == 200) {
                  this.tableData = response.data.data.data;
                }
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    onSubmit() {
      manageApi.addSeckillProduct(this.form).then((response) => {
        if (response.data.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.form = this.form1;
        }
      });
    },
  },
  created() {},
};
</script>
<style>
.el-form-item__error {
  z-index: 9999999;
}
</style>